<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab</title>
<!-- css -->
<link id="v_theme" href="../../src/css/theme/aristo/theme.css" rel="stylesheet" type="text/css" />
<link href="../../src/css/primeui-1.1-min.css" rel="stylesheet" type="text/css" />
<!--lib js  -->
<script type="text/javascript" src="../../src/lib/vue.js"></script>
<script type="text/javascript" src="../../src/lib/jquery.min.js"></script>
<!-- js加载器 -->
<script type="text/javascript" src="../../src/loader/loader.js"></script>
<script type="text/javascript" src="../js/theme.js"></script>
</head>
<body>

<button onclick="select(1)">select(1)</button>
<button onclick="exists('英文')">exists('英文')</button>
<button onclick="getSelected()">getSelected()</button>
<button onclick="getSelectedIndex()">getSelectedIndex()</button>
<button onclick="getTab(1)">getTab(1)</button>
<button onclick="add()">add()</button>
<button onclick="closeTab(0)">closeTab(0)</button>
<button onclick="disableTab(0)">disableTab(0)</button>
<button onclick="enableTab(0)">enableTab(0)</button>
<button onclick="setTitle()">setTitle()</button>
<button onclick="hideItem(0)">hideItem(0)</button>
<button onclick="showItem(0)">showItem(0)</button>
<hr>
<div id="tab1"></div>
<br>
<div id="tab2"></div>

<div id="tab1-cont">abc</div>
<div id="tab2-cont">啊啊啊</div>

<script type="text/javascript">

VUI
.dir('../../src/') // 设置JS存放根目录
.use('Tab',function(){
	tab1 = new VUI.Tab({
		renderId:'tab1'
		,onSelect:function(e) {
			console.log('onSelect title:' + e.item.title + " index:" + e.index);
		}
		,onAdd :function(e) {
			console.log('onAdd title:' + e.item.title + " index:" + e.index);
		}
		,onBeforeClose:function(e) {
			console.log(e)
			if(e.item.title == '无法关闭') {
				return false;
			}
		}
		,items:[
		    // contentId值tab内容ID
			{title:'英文',contentId:'tab1-cont'}
			,{title:'中文',contentId:'tab2-cont',closable:true}
			,{title:'无法关闭',content:'无法关闭',closable:true}
		]
	});
	
	tab2 = new VUI.Tab({
		renderId:'tab2'
		,width:500
		,onSelect:function(e) {
			console.log('onSelect title:' + e.item.title + " index:" + e.index);
		}
		,items:[
		    // contentId值tab内容ID
			{text:'tab1',content:'111111'}
			,{text:'tab2',selected:true,width:200,content:'AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。'}
			,{text:'tab3',content:'各个 angular.js 版本下载： https://github.com/angular/angular.js/releases'}
		]
		,loadFilter:function(items) {
			for (var i = 0; i < items.length; i++) {
				items[i].title = items[i].text;
			}
		}
	});
});

function getSelected() {
	var item = tab1.getSelected();
	console.log('selected item:' + item.title);
}
function setTitle() {
	tab1.setTitle(0,"新标题")
}
function hideItem(index) {
	tab1.hideItem(index)
}
function showItem(index) {
	tab1.showItem(index)
}
function add() {
	var item = {title:'法文',content:'fffffff',selected:true}
	tab1.add(item);
}
function getTab(titleOrIndex) {
	var item = tab1.getTab(titleOrIndex);
	console.log('getTab item:' + item.title);
}
function getSelectedIndex() {
	var index = tab1.getSelectedIndex();
	console.log('getSelectedIndex index:' + index);
}
function select(index) {
	tab1.select(1);
}
function closeTab(index) {
	tab1.close(index);
}
function disableTab(index) {
	tab1.disableTab(index);
}
function enableTab(index) {
	tab1.enableTab(index);
}

function exists(titleOrIndex) {
	var exists = tab1.exists(titleOrIndex);
	console.log(titleOrIndex + " exists:" + exists);
}

</script>
</body>
</html>